<template>

  <div class="blog-detail-container"  >
    <Header></Header>
    <h2>{{ blog.title }}</h2>
    <p>{{ blog.content }}</p>
    <img :src="blog.image" alt="Blog Image" v-if="blog.image"  style="width: 100px; margin: 30px 20px;"/>
    <div class="actions">
      <!-- <button @click="likeBlog">点赞 ({{ likes }})</button> -->
      <button @click="likeBlog(blog)">点赞</button>
      <button @click="toggleComments">评论</button>
    </div>
    <div v-if="showComments">
      <h3>评论</h3>
      <ul>
        <li v-for="comment in paginatedComments" :key="comment.id">{{ comment.text }}</li>
      </ul>
      <input v-model="newComment" placeholder="添加评论..." />
      <button @click="addComment">提交</button>
      <div class="pagination">
        <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
        <span>第 {{ currentPage }} 页</span>
        <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
      </div>
    </div>
    <router-link to="/home">返回首页</router-link>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { reactive,  toRefs } from 'vue'
import { useRoute } from 'vue-router';
import axios from 'axios';
import Header from './Header.vue';
import life3 from "../images/life-3.jpg"
import Star1 from "../images/star-1.png"
import m3 from "../images/M-3.png"
const likedBlogs = ref([]);
const route = useRoute();
const blog = ref({}); // 存储博客详情
const likes = ref(0); // 存储点赞数
const comments = ref([]); // 存储评论
const newComment = ref(''); // 新评论内容
const showComments = ref(false); // 控制评论显示
const currentPage = ref(1); // 当前页码
const itemsPerPage = 1; // 每页显示的评论数量
const totalPages = computed(() => Math.ceil(comments.value.length / itemsPerPage)); // 总页数
// 模拟博客数据
const blogs = [
{ id: 1, content: '原来追星会不远万里一个人来不熟悉的城市 ​​' ,image:life3},
{ id: 2,  content: '#电影小小的我定档#打起鼓来敲起锣，新年来临之际，一切都有可能发生。12月31日和#电影小小的我#一起向前看。 ​',image:Star1 },
{ id: 3, content: ' 《死亡笔记》全员帅的很安心！(绘师:sso_s__) #最让你心动的二次元角色# ​​​' ,image:m3},
];
// 获取博客详情
const fetchBlogDetail = async () => {
  const blogId = route.params.id; // 获取动态路由参数
  try {
    const response = await axios.get(`http://localhost:3000/api/blogs/${blogId}`); // 替换为实际 API
    blog.value = response.data;
    likes.value = blog.value.likes || 0; // 假设博客数据中有点赞数
    comments.value = blog.value.comments || []; // 假设博客数据中有评论
  } catch (error) {
    console.error('获取博客详情失败:', error);
  }
};

// 点赞功能
// const likeBlog = () => {
//   likes.value++;
  
// };

// 切换评论显示
const toggleComments = () => {
  showComments.value = !showComments.value;
};

// 添加评论
const addComment = () => {
  if (newComment.value.trim()) {
    comments.value.push({ id: comments.value.length + 1, text: newComment.value });
    newComment.value = ''; // 清空输入框
    // 这里可以添加 API 调用以保存评论
  }
};

// 翻页功能
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

// 计算当前页的评论
const paginatedComments = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage;
  return comments.value.slice(start, start + itemsPerPage);
});

// 在组件挂载时获取博客详情
onMounted(() => {
  fetchBlogDetail();
});
onMounted(() => {
  const blogId = parseInt(route.params.id);
  blog.value = blogs.find(b => b.id === blogId) || {};
});
const likeBlog = (blog) => {
  if (!likedBlogs.value.includes(blog.id)) {
    likedBlogs.value.push(blog.id); // 添加到点赞列表
    alert(`已点赞: ${blog.title}`);
  } else {
    alert(`您已经点赞过此博客: ${blog.title}`);
  }
};
</script>

<style scoped>
.blog-detail-container {
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.blog-image {
  max-width: 100%; 
  height: auto; /* 自适应高度 */
}

.actions {
  margin: 20px 0; /* 按钮间距 */
}

.pagination {
  margin-top: 10px; /* 翻页按钮间距 */
}
</style>
